export const typeMapList = [
  {
    icon: '',
    width: 50,
    height: 60,
  },
  {
    icon: '',
    width: 52,
    height: 64,
  },
  {
    icon: '',
    width: 100,
    height: 100,
  },
  {
    icon: '',
    width: 100,
    height: 100,
  },
];

const massMarks = useRef();

// 创建Style
const createStyle = () =>
  typeMapList.map((item, idx) => {
    const { width, height, icon } = item;
    return {
      url: icon,
      anchor: 'center',
      size: new AMap.Size(width, height),
      zIndex: idx + 1,
    };
  });

// 点位点击事件
const handleClickPoint = item => {
  window.map.setCenter([item.ordx, item.ordy]);
};

// 地图打点
const drawPointer = () => {
  massMarks.current && massMarks.current.clear();
  const hlPointsId = highlightPoints.map(item => item.id);
  const normalPoints = housePoints.filter(item => !hlPointsId.includes(item.id));
  const childList = [];

  const renderPoints = (list, isSelected) => {
    list.forEach(item => {
      if (item?.ordx && item?.ordy) {
        childList.push({
          lnglat: [item.ordx, item.ordy],
          id: item.id,
          style: item.warningStatus + (isSelected ? 2 : 0),
          ...item,
        });
      }
    });
  };
  renderPoints(normalPoints, false);
  renderPoints(highlightPoints, true);

  if (childList?.length > 0) {
    const mass = new AMap.MassMarks(childList, {
      zIndex: 111,
      cursor: 'pointer',
      style: createStyle(),
    });
    mass.setMap(window.map);
    massMarks.current = mass;
    mass.on('click', e => {
      handleClickPoint(e.data);
    });
  }
};

useEffect(() => {
  isCompleted && drawPointer();
}, [housePoints, highlightPoints, isCompleted]);
